/* eslint-disable react/no-array-index-key */
import type { QuestionData } from '../../interface'
import styles from './index.module.less'

export const SingleChoiceDetail = (props: { title: string; options: QuestionData['options'] }) => {
    return (
        <div className={styles.box}>
            <div className={styles.title}>{props.title}</div>
            <div className={styles.content}>
                {props.options.map((item, index) => {
                    return (
                        <div key={index}>
                            <div className={styles.percentBar}>
                                <div className={styles.percentBar_header}>
                                    <div className={styles.percentBar_header_title}>
                                        {item.name}
                                    </div>
                                    <div
                                        className={styles.percentBar_header_percent}
                                    >{`${parseFloat(
                                        (Number(item.score) * 100).toPrecision(2),
                                    )}%`}</div>
                                </div>
                                <div className={styles.percentBar_progress}>
                                    <div style={{ width: `${Number(item.score) * 100}%` }} />
                                </div>
                            </div>

                            {index < props.options.length - 1 && (
                                <div className={styles.splitLine} />
                            )}
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
